<template>
<div style="background-color: #fff;height: 89.8vh;">
  <div id="tool">
    <el-button type="success" @click="newButton">新增</el-button>
    <el-button @click="batchRemove" type="danger">批量删除</el-button>
    <el-button @click="showUpload" type="primary" >导入</el-button>
    <el-button @click="batchOut"  type="primary">导出</el-button>
    <el-divider>
      <el-icon><Search /></el-icon>
    </el-divider>
    <el-row>
          <el-col style="text-align: center" :span="2">路由路径</el-col>
          <el-col :span="4">
            <el-input v-model="searchForm.routerPath" />
          </el-col>
          <el-col style="text-align: center" :span="2">路径组件</el-col>
          <el-col :span="4">
            <el-input v-model="searchForm.routerComponent" />
          </el-col>
          <el-col style="text-align: center" :span="2">路由名</el-col>
          <el-col :span="4">
            <el-input v-model="searchForm.routerName" />
          </el-col>
      <el-col style="text-align: center" :span="2">
        <el-button @click="search" type="primary">搜索</el-button>
      </el-col>
    </el-row>
    <el-divider>
      <el-icon><Document /></el-icon>
    </el-divider>
  </div>
  <el-table  row-key="routerNo"
             ref="routerTable" :data="routerData" stripe :tree-props="{ children: 'child' }">
    <el-table-column type="selection" width="55" />
      <el-table-column align="center" prop="routerNo" label="路由编号"  />
      <el-table-column align="center" prop="routerPath" label="路由路径"  />
      <el-table-column align="center" prop="routerComponent" label="路径组件"  />
      <el-table-column align="center" prop="routerName" label="路由名"  />
      <el-table-column align="center" prop="routerIcon" label="图标"  >
        <template #default="scope">
          <img style="width: 24px" :src="scope.row.routerIcon">
        </template>
      </el-table-column>
<!--    <el-table-column align="center" prop="router" label="父路由"  />-->
    <el-table-column align="center" prop="routerType" label="路由类型"  >
      <template #default="scope">
        <span v-if="scope.row.routerType==0">项</span>
        <span v-if="scope.row.routerType==1">菜单</span>

      </template>
    </el-table-column>
    <el-table-column align="center" label="操作" width="200">
      <template #default="scope">
        <el-button @click="updateButton(scope.row)" type="warning">修改</el-button>
        <el-button @click="removeButton(scope.row.routerNo)" type="danger">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
<paging @init="loadTable" v-model:count="count"  v-model:limit="limit"  v-model:page="page"></paging>
</div>

  <el-dialog draggable v-model="routerFormDisplay">
    <router-form @submitRouterForm="submitRouterForm" @closeRouterForm="closeRouterForm" ref="RouterFormView"></router-form>
  </el-dialog>
  <el-dialog draggable v-model="uploadDisplay">
    <upload @batchImport="batchImportRouter"></upload>
  </el-dialog>
</template>
<script setup>
import {onMounted, reactive, ref} from "vue";
import {batchAddRouter, batchOutRouter, batchRemoveRouter, getAllRouter, removeRouter, searchRouter} from "../../../request/system/RouterApi.js";
import {Document, Search} from "@element-plus/icons-vue";
import RouterForm from "../../../components/form/system/RouterForm.vue";
import {ElMessage} from "element-plus";
import Paging from "../../../components/Paging.vue";
const RouterFormView=ref()
const routerData=ref([])
const page=ref(1)
const limit=ref(10)
const count=ref(0)
const routerFormDisplay=ref(true);
const routerTable=ref()
import moment from "moment"
import Upload from "../../../components/upload.vue";
const uploadDisplay=ref(true)
const searchForm =reactive({
  routerPath:'',
  routerComponent:'',
  routerName:'',
  page:page.value,
  limit:limit.value
})
const loadTable=(newPage,newLimit)=>{
  page.value=newPage
  limit.value=newLimit
  searchForm.page=newPage
  searchForm.limit=newLimit;
  if(searchForm.routerPath==""&&searchForm.routerComponent==""&&searchForm.routerName==""){
    init()
  }else {
    search()
  }
}
const showUpload=()=>{
  uploadDisplay.value=true
}
const search=()=>{
  searchRouter(searchForm).then((response)=>{
      routerData.value=response.data
    count.value=response.count
  })
}
const batchImportRouter=(files)=>{
  batchAddRouter({"routerArray":files}).then((response)=>{
    if(response.state=="200"){
      ElMessage.success("导入成功")
      init();
      uploadDisplay.value=false;
    }
  })
}
const batchOut=()=>{
  let rows=routerTable.value.getSelectionRows()
  if(rows.length>0){
    for (let i = 0; i < rows.length; i++) {
      rows[i]=JSON.stringify(rows[i])
    }
    batchOutRouter({routerArray:rows}).then((response)=>{
      const url = window.URL.createObjectURL(new Blob([response]));
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', 'Router:'+ moment(new Date()).format("yyyy-MM-DD-HH-mm-ss")+'.xls'); // 指定下载的文件名
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      URL.revokeObjectURL(url);
      ElMessage.success("导出成功")
    })
  }else {
    ElMessage.warning("请最少选中一行")
  }
}
const batchRemove=()=>{
  let rows=routerTable.value.getSelectionRows()
  if( rows.length>0){
    let id=""
    for (let i = 0; i < rows.length; i++) {
    id+=rows[i].routerNo+","
    }
    id=id.substring(0,id.length-1)
    batchRemoveRouter(id).then((response)=>{
      if(response.state=="200"){
        ElMessage.success("删除成功")
        init()
      }
    })
  }else {
    ElMessage.warning("请最少选中一行")
  }

  console.log()
}
const init=()=>{
  getAllRouter(page.value,limit.value).then(response=>{
  routerData.value=response.data
    count.value=response.count
    // for (let i = 0; i < routerData.value.length; i++) {
    //   routerData.value[i].children=routerData.value[i].child
    // }
  })
}
const removeButton=(routerNo)=>{
  removeRouter(routerNo).then((response)=>{
    if(response.state=="200"){
      ElMessage.success("删除成功")
      init()
    }
  })
}
const updateButton=(row)=>{
  routerFormDisplay.value=true;
    RouterFormView.value.fillForm(row)
}
const submitRouterForm=()=>{
    routerFormDisplay.value=false;
  init()
}
const closeRouterForm=()=>{
    routerFormDisplay.value=false;
}
const newButton=()=>{
    routerFormDisplay.value=true;
    RouterFormView.value.rest(true)


}
onMounted(()=>{
    routerFormDisplay.value=false
  uploadDisplay.value=false
  init();
})
</script>
<style scoped>
#tool{
  background-color: #fff;
  padding: 10px;
}
</style>
